import React, { memo, useEffect, useState } from "react";
import { nanoid } from "nanoid";

import { LayoutCardWrapper } from "./style";
import Card from "../card";

export default memo(function LayoutCard({ data = [] }) {
  const [leftData, setLeftData] = useState([]);
  const [rightData, setRightData] = useState([]);
  useEffect(() => {
    const length = data.length;
    if (length % 2 === 0) {
      setLeftData([...data.slice(0, length / 2)]);
      setRightData([...data.slice(length / 2, length)]);
    } else {
      setLeftData([...data.slice(0, Math.floor(length / 2) + 1)]);
      setRightData([...data.slice(Math.floor(length / 2) + 1, length)]);
    }
  }, [data]);

  return (
    <LayoutCardWrapper>
      <div className="left">
        {leftData.map((item, index) => {
          return <Card data={item} key={nanoid()} />;
        })}
      </div>
      <div className="right">
        {rightData.map((item, index) => {
          return <Card data={item} key={nanoid()} />;
        })}
      </div>
    </LayoutCardWrapper>
  );
});
